<template>
  <b-navbar toggleable="lg">
    <b-navbar-brand href="/">LOGO</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item v-for="(o, i) in list" :key="i" :href="o[vm.url]">{{
          o[vm.name]
        }}</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input
            size="sm"
            class="mr-sm-2"
            placeholder="Search"
          ></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit"
            >Search</b-button
          >
        </b-nav-form>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template #button-content>
            <em>用户</em>
          </template>
          <b-dropdown-item href="/login">个人中心</b-dropdown-item>
          <b-dropdown-item href="/register">注册</b-dropdown-item>
          <b-dropdown-item @click="onLogout">退出</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          img: "img",
          name: "name",
          url: "url",
          nav_id: "nav_id",
          father_id: "father_id",
        };
      },
    },
    span: {
      type: Number,
      default: 4,
    },
  },
  data() {
    var col = 12 / this.span;
    return {
      col,
    };
  },
  methods: {
    has_sub(id) {
      var lt = this.list;
      var father_id = this.vm["father_id"];
      var bl = false;
      for (var i = 0; i < lt.length; i++) {
        var o = lt[i];
        if (id == o[father_id]) {
          bl = true;
          break;
        }
      }
      return bl;
    },
    onLogout() {
      this.$message({
        message:'成功退出',
        type: "success",
      });
    },
  },
  computed: {
    // list_new() {
    // 	var lt = [...this.list];
    // 	return this.list.map(item => {
    // 		var sub = [];
    // 		for (var i = 0; i < lt.length; i++) {
    // 			var o = lt[i];
    // 			if (item[nav_id] == o[father_id]) {
    // 				sub.push(o);
    // 			}
    // 		}
    // 		item.sub = sub;
    // 		return item
    // 	})
    // }
  },
};
</script>

<style scoped>
.nav_main .item img {
  max-width: 24px;
}

.nav_main .item {
  float: left;
}
</style>
